<template>
  <div>
    <div class="title">登录</div>
    <div class="cotainer">
      <img class="img-1" src="../assets/蜂拥登录icon@2.88x.png" alt>
    </div>
    <div class="register-from">
      <div class="register-item">
        <img class="left-icon" src="../assets/ren.png" alt="" v-if="phone.length>0">
        <img class="left-icon" src="../assets/nicheng@2x.png" alt v-else>
        <input
          class="ipt"
          type="text"
          placeholder="手机号码"
          v-model="phone"
          @focus="changefi('phone')"
          @blur="hidden"
        >
        <img
          class="right-icon"
          src="../assets/Page 1@2.88x.png"
          alt="clear"
          v-if="phone.length>0&&fious=='phone'"
          @touchend="clearIpt('phone')"
        >
      </div>
      <div class="register-item">
        <img class="left-icon" src="../assets/wanc.png" alt="" v-if="password.length>0">
        <img class="left-icon" src="../assets/xinmima@2x.png" alt v-else>
        <input
          class="ipt"
          v-bind="{type: che ? 'password':'text'}"
          v-model="password"
          placeholder="请输入密码"
          @focus="changefi('password')"
          @blur="hidden"
        >
        <img
          class="right-icon"
          src="../assets/Page 1@2.88x.png"
          alt="clear"
          :style="{visibility: !(password.length>0&&fious=='password') ? 'hidden':''}"
          @touchend="clearIpt('password')"
        >
        <img class="yan" src="../assets/yanjingbi.png" alt v-if="che&&password.length>0" @click="changer">
        <img class="manyan" src="../assets/mimayan.png" alt=""  v-else-if="password.length>0" @click="changer">
      </div>
    </div>
    <div class="next" v-if="phone.length>0&&password.length>0" @click="encapsulation">登录</div>
    <div class="next next-2" v-else>登录</div>
    <router-link class="forget" to="/lost" tag="div">忘记密码</router-link>
    <router-link class="register" to="/register" tag="div">立即注册 ></router-link>
  </div>
</template>
<script>
import qs from 'qs'
export default {
    data(){
        return{
            phone:'18349179063',
            password:'yuanbo1234',
            che:true,
            time:5,
            fious:''
        }
    },
    methods:{
    changer() {
      this.che = !this.che;
    },
    getUserId(id){ 
      let headers={
        'content-type':'application/json'
      }
      if(this.$store.state.token){
        headers={
        'content-type':'application/json',
        'token':this.$store.state.token,
        'userid':this.$store.state.userInfo.id
        }
      }
      this.$http({
        method:'post',
        headers,
        url:'https://web-gateway.newbeescm.com/b2b-app-web/app/merchant/getByUserId/'+id
      })
      .then(res=>{
        console.log(res)
        if(res.data.status.statusCode===0){
          // this.$store.commit('setcityId',res.data.result.cityId)
          // this.$store.commit('setcountyId',res.data.result.districtId)
          // this.$store.commit('setprovinceId',res.data.result.provinceId)
          // this.$store.commit('setstreetId',res.data.result.streetId)
          // this.getGroupId(res.data.result.groupId,id)
          this.$store.commit('setStationId',res.data.result.stationId)
          this.$store.commit('setmerchantId',res.data.result)
          // this.$store.commit('setGroupId',res.data.result.groupId)
          this.merchantId=res.data.result.merchantId
          this.siteid=res.data.result.stationId
        }
      })
    },
    getGroupId(groupId,id){
      let headers={
        'content-type':'application/json'
      }
      if(this.$store.state.token){
        headers={
        'content-type':'application/json',
        'token':this.$store.state.token,
        'userid':id
        }
      }
      
      this.$http({
        method:'post',
        headers,
        url:'https://web-gateway.newbeescm.com/b2b-app-web/getListOfShopByGroupId?groupId='+groupId,
        data:{
          groupId:groupId
        }
      })
      .then(res=>{
        console.log(res)
        if(res.data.status.statusCode===0){
          console.log(res.data.result.items[0])
          this.$store.commit('setStore', res.data.result.items[0])
          this.storeCustId=res.data.result.id
          this.storeId=res.data.result.storeId
          this.getAxios(id)
        }
      })
    },
    getAxios(id){
      let headers={
        'content-type':'application/json'
      }
      let data={
        "merchantId":0,
        "siteid":22,
        "storeCustId":0,
        "terminal":3,
        "storeId":0
      }
      if(this.$store.state.token){
        headers={
        'content-type':'application/json',
        'token':this.$store.state.token,
        'userid':id
        }
        data={
          "merchantId":this.merchantId,
          "siteid":this.siteid,
          "storeCustId":this.storeCustId,
          "terminal":3,
          "storeId":this.storeId
        }
      }
      this.$http({
          method:'post',
          headers,
          url:'https://web-gateway.newbeescm.com/b2b-app-web/getListB2bIndex',
          data:data
      })
      .then(res=>{
        console.log(res)
        if(res.data.status.statusCode === 0){
          this.result=res.data.result
          console.log(this.result)
          this.spans=this.result.b2bFloorVoList[1].b2bFloorBannerList
          this.swiper = this.result.b2bAdvList;
          this.goods = this.result.b2bFloorVoList[0].goodsListRecommendLocationsList;
          this.goodsSwiper=this.result.b2bFloorVoList[1].b2bFloorBannerList
          this.goodsSwiper2=this.result.b2bFloorVoList[2].b2bFloorBannerList
          this.goods2 = this.result.b2bFloorVoList[2].goodsListRecommendLocationsList;
          
        }
      })
      .catch(err=>{
        console.log(err)
      })
      
    },
        clearIpt(val){
            this[val]=''
        },
        changefi(val){
            this.fious=val;
        },
        hidden(){
            this.fious=''
        },
        encapsulation(){
            let that=this;
            this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/user/login',qs.stringify({
                loginName:this.phone,
                password:this.password
            }))
            .then(res=>{
                console.log(res)
                if(res.data.status.statusCode === 0){
                    console.log('登陆成功')
                    this.$store.commit('setToken',res.data.result.token)
                    this.$store.commit('setUserInfo',res.data.result)
                    console.log(res.data.result.groupId)
                    // this.$router.replace(this.$route.query.redirect||'/Home')
                    this.$router.replace('/Home')
                    this.getUserId(res.data.result.id)
                    // this.getGroupId(res.data.result.groupId,res.data.result.id);
                    // this.getAxios(res.data.result.id);
                    
                }else{
                    console.log(res.data.status.statusReason)
                }
            })
            .catch(err=>{
                console.log(err)
            })
      }
    },
    created(){                          
        // this.encapsulation();
    }
}
</script>
<style scoped lang="scss">
.title {
  height: 0.435rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #030303;
  font-size: 0.18rem;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #ccc;
    height: 1px;
    transform: scale(1, 0.5);
  }
}
.cotainer {
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.51rem auto;
  line-height: 1rem;
  .img-1 {
    width: 0.7rem;
  }
}
.register-from {
  padding: 0.15rem 0.3rem 0.15rem 0.31rem;
  .register-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 0.42rem;
    margin-top: 0.07rem;
    .left-icon {
      width: 0.16rem;
      height: 0.16rem;
      margin-right: 0.17rem;
    }
    .ipt {
      flex: 1;
      border: none;
      outline: none;
    }
    .right-icon {
      width: 0.14rem;
      height: 0.14rem;
      padding: 0.14rem;
    }
    .code {
      font-size: 0.14rem;
      color: aqua;
    }
    .manyan{
      width: 0.17rem;
      height: 0.18rem;
      padding-right: 0.1rem;
    }
    .yan {
      width: 0.4rem;
      height: 0.4rem;
    }
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #ccc;
      transform: scale(1, 0.5);
    }
  }
}
.next {
  margin: 0 auto;
  width: 3.11rem;
  height: 0.44rem;
  color: #fff;
  background: #dd3333;
  border-radius: 4px;
  line-height: 0.44rem;
  text-align: center;
}
.next-2 {
  opacity: 0.5;
}
.forget {
  font-size: 0.13rem;
  color: #999;
  float: right;
  margin-top: 0.15rem;
  margin-right: 0.31rem;
}
.register {
  text-align: center;
  font-size: 0.13rem;
  color: #dd3333;
  margin-top: 1.62rem;
}
</style>
